<template>
  <div>

    <!-- 区隔内容的分割线。 -->
    <el-divider></el-divider>
    <!-- 交酒信息 -->
    <el-form ref="baseForm"
             :model="state.formData"
             label-width="100px"
             :label-position="'top'"
             style="margin-top: 0"
             class="ht-search-form">
      <div class="title">
        交酒信息

      </div>

      <el-row :gutter="24"
              style="flex: 1"
              type="flex">
        <el-col :span="4">
          <el-form-item label="交酒单号">
            <ht-select-base-data v-model="state.formData.transOrderNo"
                                 :dataTypeId="'positions'"
                                 :clearable="true"></ht-select-base-data>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="投料日期">
            <el-date-picker type="date"
                            v-model="state.formData.putMaterialDate"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            style="width:100%"
                            placeholder="选择日期">
            </el-date-picker>

          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="交酒日期"
                        :rules="{
            required: true,
            message: '请输入',
            trigger: 'blur',
          }"
                        prop="transWineDate">
            <el-date-picker type="date"
                            v-model="state.formData.transWineDate"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            style="width:100%"
                            placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="实际交酒日期"
                        :rules="{
            required: true,
            message: '请输入',
            trigger: 'blur',
          }"
                        prop="realTransWineDate">
            <el-date-picker type="date"
                            @change=" state.formData.wineBreedManuDate =state.formData.realTransWineDate"
                            v-model="state.formData.realTransWineDate"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            style="width:100%"
                            placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="申请人"
                        :rules="{
            required: true,
            message: '请输入',
            trigger: 'blur',
          }"
                        prop="applyer">
            <ht-select-user v-model="state.formData.applyer"
                            :clearable="true"></ht-select-user>

          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="排次">
            <el-input :dataTypeId="'positions'"
                      :clearable="true"></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <!-- 摘酒类型 -->
      <el-row :gutter="24"
              style="flex: 1"
              type="flex">
        <el-col :span="4">
          <el-form-item label="摘酒类型">
            <el-input :dataTypeId="'positions'"
                      :clearable="true"></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <div class="title">
        交酒酒品

      </div>
      <!-- 摘酒类型 -->
      <el-row :gutter="24"
              style="flex: 1"
              type="flex">
        <el-col :span="4">
          <el-form-item label="酒品名称"
                        :rules="{
            required: true,
            message: '请输入',
            trigger: 'blur',
          }"
                        prop="wineBreedName">
            <el-input placeholder="请输入"
                      v-model="state.formData.wineBreedName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="酒品代码">
            <ht-select-base-data :dataTypeId="'positions'"
                                 v-model="state.formData.wineBreedCode"
                                 :clearable="true"
                                 :disabled="true"></ht-select-base-data>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="生产年月">

            <el-date-picker type="date"
                            :disabled="true"
                            v-model="state.formData.wineBreedManuDate"
                            format="yyyy 年 MM 月"
                            value-format="yyyy-MM"
                            style="width:100%"
                            placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>

      </el-row>
      <div class="title">
        酿造信息

      </div>
      <!-- 摘酒类型 -->
      <el-row :gutter="24"
              style="flex: 1"
              type="flex">
        <el-col :span="4">
          <el-form-item label="酿造车间">

            <ht-select-base-data :hide-code="true"
                                 v-model="state.formData.brewWorkShop"
                                 :dataTypeId="'positions'"
                                 :clearable="true"></ht-select-base-data>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="酿造班次">
            <ht-select-base-data :dataTypeId="'positions'"></ht-select-base-data>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="班组名称">
            <ht-select-base-data :dataTypeId="'positions'"
                                 v-model="state.formData.brewWorkGroup"
                                 :clearable="true"
                                 :disabled="true"></ht-select-base-data>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="酿造池号">
            <ht-select-base-data :dataTypeId="'positions'"
                                 v-model="state.formData.brewWarehouseSpace"
                                 :clearable="true"></ht-select-base-data>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

  </div>
</template>
<script lang='ts'>
import { Component, Prop, Vue } from "vue-property-decorator";
interface State {
  /** 数据状态 */
  loading: boolean;
  active: number;
  formData: any;
}
@Component
export default class Index extends Vue {
  @Prop() active!: number;
  @Prop() data!: any;

  /** 数据 */
  state: State = {
    loading: false,
    active: 0,
    formData: {
      //交酒单号
      transOrderNo: "",
      //投料日期
      putMaterialDate: "",
      //*交酒日期
      transWineDate: "",
      //*实际交酒日期
      realTransWineDate: "",
      //*申请人
      applyer: "",
      //*酒品名称
      wineBreedName: "",
      //酒品代码
      wineBreedCode: "",
      //*生产年月
      wineBreedManuDate: "",
      //酿造车间
      brewWorkShop: "",
      //班组名称
      brewWorkGroup: "",
      //酿造池号：酒库的库位
      brewWarehouseSpace: "",
    },
  };
  /** 生命周期 */
  mounted() {
    this.initData(this.data);
  }
  /** 方法 */
  submit() {
    let data: false | any = false;
    (this.$refs["baseForm"] as any).validate((valid: boolean) => {
      if (valid) {
        data = this.state.formData;
      } else {
        this.$notify.error("请完善信息");
      }
    });
    return data;
  }
  //初始化数据，将数据传递给fordata
  initData(data: any) {
    for (const key in this.state.formData) {
      for (const Datakey in data) {
        if (key == Datakey && data[Datakey]) {
          this.state.formData[key] = data[Datakey];
        }
      }
    }
  }

  /** 监听 */
  /** 计算属性 */
}
</script>
<style lang='scss' scoped>
.title {
  font-size: 14px;
  font-weight: bold;
  /* 文字色/文字 绿#323433 */
  color: #323433;
}
</style>